<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
    <link
      rel="stylesheet"
      href=""
    />
    <style></style>
  </head>
  <body>
    <div class="box">00:01:00</div>
    <button class="start">开始</button>
    <button
      class="end"
      disabled
    >
      停止
    </button>

    <script>
      const box = document.querySelector('.box'),
        stratBtn = document.querySelector('button.start'),
        endBtn = document.querySelector('button.end')

      let timer

      function setTime(endTime) {
        const nowTime = +new Date()

        const time = (endTime - nowTime) / 1000

        if (time < 0) {
          return false
        }
        let hour = (Math.floor(time / 60 / 60) + '').padStart(2, '0')
        let minute = (Math.floor(time / 60) + '').padStart(2, '0')
        let second = (Math.floor(time % 60) + '').padStart(2, '0')
        return `${hour}:${minute}:${second}`
      }

      stratBtn.addEventListener('click', () => {
        stratBtn.disabled = true
        endBtn.disabled = false

        const timeStr = box.innerHTML
          .split(':')
          .map((el, i) => {
            return i === 0 ? (+el + 8 + '').padStart(2, '0') : el
          })
          .join(':')
        console.log(timeStr)
        const time = +new Date('1970-01-01 ' + timeStr)
        console.log(time)
        const endTime = +new Date() + time
        timer = setInterval(() => {
          const result = setTime(endTime)
          if (!result) {
            stratBtn.disabled = false
            endBtn.disabled = true
            box.innerHTML = '00:01:00'
            clearInterval(timer)
          } else {
            box.innerHTML = result
          }
        }, 1000)
      })

      endBtn.addEventListener('click', () => {
        stratBtn.disabled = false
        endBtn.disabled = true
        clearInterval(timer)
      })
    </script>
  </body>
</html>
